<template>
  <div class="nihss-graph">
    <div class="nihss-graph-box">
      <div class="score">NIHSS 评分：<span id="score-num" class="score-num">{{calcScore}}</span>分</div>
      <div class="desc">你已经选择 <span>{{scoreArr}}</span> 个评分项，尚有 <span>{{15 - scoreArr}}</span> 个评分项未选择</div>
      <NihssSvg />
    </div>

    <div class="btns">
      <van-button class="btn" round plain type="primary" @click="reset"><van-icon name="revoke" />复位</van-button>
      <!-- <van-button class="btn" round type="primary"><van-icon name="guide-o" />一键分享</van-button> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, defineExpose, computed, defineEmits } from 'vue'
  import NihssSvg from '@tpls/nihss-svg.vue'
  import { setColor } from './hooks/set-color'
  import { Dialog } from 'vant'

  const props = defineProps(['scoreList', 'popupParams'])
  const emit = defineEmits(['getScore', 'resetScore'])

  const calcScore = computed(() => {
    let score = 0
    for (const key in props.scoreList) {
      key !== 'radio-16' ? score = score + props.scoreList[key] : ''
    }
    return score
  })

  const scoreArr = computed(() => {
    const arr = []
    for (const key in props.scoreList) { 
      props.scoreList[key] !== null && key !== 'radio-16' ? arr.push(props.scoreList[key]) : ''
    }
    return arr.length
  })
  let theme = setColor()
  const changeTab = () => {
    // console.log(props.scoreList, props.popupParams)
    theme = setColor(props.scoreList, props.popupParams)
  }
  const reset = () => {
    Dialog.confirm({
      title: '复位',
      message:
        '确认是否重置得分选项和脑图？',
    })
    .then(() => {
      emit('resetScore')
    })
  }
  defineExpose({ changeTab })
</script>

<style lang="less" scoped>
@import './styles/nihss-graph.less';

/deep/.cls-1a {
  fill: v-bind('theme.radio_1a') !important;
}

/deep/.cls-1b {
  fill: v-bind('theme.radio_1b') !important;
}
/deep/.cls-1c {
  fill: v-bind('theme.radio_1c') !important;
}
/deep/.cls-2-l {
  fill: v-bind('theme.radio_2_l') !important;
}
/deep/.cls-2-r {
  fill: v-bind('theme.radio_2_r') !important;
}
/deep/.cls-2-x {
  fill: v-bind('theme.radio_2') !important;
}
/deep/.cls-4-l {
  fill: v-bind('theme.radio_4_l') !important;
}
/deep/.cls-4-r {
  fill: v-bind('theme.radio_4_r') !important;
}
/deep/.cls-4-x {
  fill: v-bind('theme.radio_4') !important;
}
/deep/.cls-5a {
  fill: v-bind('theme.radio_5a') !important;
}
/deep/.cls-5b {
  fill: v-bind('theme.radio_5b') !important;
}
/deep/.cls-6a {
  fill: v-bind('theme.radio_6a') !important;
}
/deep/.cls-6b {
  fill: v-bind('theme.radio_6b') !important;
}
/deep/.cls-8-l {
  fill: v-bind('theme.radio_8_l') !important;
}
/deep/.cls-8-r {
  fill: v-bind('theme.radio_8_r') !important;
}
/deep/.cls-11 {
  fill: v-bind('theme.radio_11') !important;
}
/deep/.cls-9 {
  fill: v-bind('theme.radio_9') !important;
}
/deep/.cls-3 {
  fill: v-bind('theme.radio_3') !important;
}
/deep/.cls-7 {
  fill: v-bind('theme.radio_7') !important;
}
/deep/.cls-10 {
  fill: v-bind('theme.radio_10') !important;
}
/deep/.cls-16 {
  fill: v-bind('theme.radio_16') !important;
}
// 手机上描边宽度为1看不见
/deep/ path[class*=cls] {
  stroke-width: 2;
  stroke: #ffffff;
}

/deep/ text {
  font-weight: 500;
  fill: #323233;
}
</style>